<template>
    <div class="page-header">
        <div class="left">
            <div class="search">
                <el-input v-model="val1" placeholder="请输入" />
                <div class="btn">搜索</div>
            </div>
            <div class="date">
                <el-date-picker v-model="val2" type="datetimerange" range-separator="-" start-placeholder="开始时间"
                    end-placeholder="结束时间" class="date-picker" @change="changeDateSearch" />
            </div>
        </div>
        <div class="right">
            <div class="btn" @click="handleAddClick">新增</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Vue } from 'vue-facing-decorator';

@Component
export default class PageHeader extends Vue {
    public val1: string = '';
    public val2: string = '';

    @Emit('handleAddClickEmit')
    public handleAddClick() {
        return null;
    }

    public changeDateSearch(date: any) {
        console.log(date);
    }
}
</script>

<style scoped lang="less">
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2vw;
    height: auto;
    background-color: #fff;
    border-radius: 1vw;
    margin-bottom: 2vh;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

    .left {
        display: flex;
        align-items: center;

        .date {
            width: 300px;
            margin-left: 12px;

            .date-picker {
                width: 300px;
            }
        }
    }

    .right {
        width: 75px;
    }

    .btn {
        display: inline-block;
        width: 75px;
        line-height: 48px;
        text-align: center;
        background-color: #1f2937;
        color: #fff;
        border-radius: 12px;
        margin-left: 8px;
    }

    .search {
        display: flex;
        align-items: center;
        width: 300px;

        button:hover {
            color: #f56c6c;
        }
    }
}
</style>

<style>
.search input {
    width: 120px;
    height: 48px;
    border-radius: 12px !important;
}

.search .el-input__wrapper {
    border-radius: 12px !important;
}

.date .el-input__wrapper {
    height: 48px;
    border-radius: 12px !important;
}

.date .el-range-editor.is-active {
    box-shadow: 0 0 0 1px #1f2937 inset;
}
</style>
